<!-- eslint-disable -->
<template>
  <div class="page-main">
    <el-row class="list-search">
      <div class="content-search">
        <el-form :inline="true" :model="data" @submit.native.prevent>
          <el-form-item label="用户">
            <el-input v-model="data.user_id" type="text" size="small" placeholder="请输入用户" clearable></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="data.name" type="text" size="small" placeholder="请输入姓名" clearable></el-input>
          </el-form-item>
          <el-form-item label="检查机构">
            <el-input v-model="data.check_jg" type="text" size="small" placeholder="请输入检查机构" clearable></el-input>
          </el-form-item>
          <el-form-item label="判定项目">
            <el-select v-model="data.pro_name" size="small" placeholder="请选择判定项目" clearable>
              <el-option
                    v-for="item in [
                      { value: '1', label: 'select选项1' },
                      { value: '2', label: 'select选项2' },
                    ]"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="search">搜 索</el-button>
            <el-button size="small" @click="searchReset">重 置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="separate-search"></div>
    </el-row>

    <el-row class="list-header">
      <div class="header-div">
        <div class="list-title">化验单表列表</div>
        <div class="div-header-btn">
          <!-- <el-button type="primary" size="small" @click="editTmp()">新 增</el-button> -->
        </div>
      </div>
    </el-row>

    <el-row>
      <el-table :data="dataList" v-loading="loading" size="medium" border
        :cell-style="{ padding: '8px 0' }"
        :header-cell-style="{ fontWeight: 'bold', color: '#333', backgroundColor: '#FAFAFA' }">
        <el-table-column prop="id" label="编号" width="70"></el-table-column>
        <el-table-column prop="nickname" label="用户" min-width="100"></el-table-column>
        <el-table-column prop="groups_name" label="分组" min-width="100"></el-table-column>
        <el-table-column prop="img" label="检查单图片" min-width="100">
          <template slot-scope="scope" v-if="scope.row.img">
            <el-popover
              placement="right"
              width="240"
              trigger="click">
              <el-image
                fit="contain"
                style="width: 200px; height: 200px"
                :src="scope.row.img">
              </el-image>
              <el-image
                slot="reference"
                fit="contain"
                style="width: 50px; height: 50px; cursor: pointer;"
                :src="scope.row.img">
              </el-image>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" min-width="100"></el-table-column>
        <el-table-column prop="sex_name" label="性别" min-width="100"></el-table-column>
        <el-table-column prop="age" label="年龄" min-width="100"></el-table-column>
        <el-table-column prop="check_jg" label="检查机构" min-width="100"></el-table-column>
        <el-table-column prop="check_time" label="检查时间" min-width="100"></el-table-column>
        <el-table-column prop="pro_name" label="判定项目" min-width="100"></el-table-column>
        <el-table-column prop="createdAt" label="分析时间" min-width="100"></el-table-column>
        <el-table-column label="操作" min-width="170">
          <template slot-scope="scope">
            <el-button @click="detailTmp(scope.row)" type="text" size="mini">详情</el-button>
            <!-- <el-divider direction="vertical"></el-divider> -->
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <el-row class="pagination pagination-news">
      <div class="pagination-div">
        <div class="total-con">
          <div class="pagination-total">共 <em> {{totalCount}} </em> 条记录</div>
        </div>
        <el-pagination
          @current-change="changePage"
          @size-change="changePageSize"
          background
          :layout="pageLayout"
          :page-sizes="pagePageSizes"
          :page-size="pagePageSize"
          :total="totalCount"
          :current-page.sync="current_page"
          :hide-on-single-page="false">
        </el-pagination>
      </div>
    </el-row>

    <ocrBlood @refreshPage="refreshPage" ref="refOcrBlood"></ocrBlood>
    <ocrThen @refreshPage="refreshPage" ref="refOcrThen"></ocrThen>
    <ocrUrine @refreshPage="refreshPage" ref="refOcrUrine"></ocrUrine>
  </div>
</template>

<!-- eslint-disable -->
<script>
  import {OcrIndex, OcrDel} from '@/utils/request.js'
  import ocrBlood from './ocr-blood.vue'
  import ocrThen from './ocr-then.vue'
  import ocrUrine from './ocr-urine.vue'
  import '@/assets/css/news.css';

  export default {
    components: { ocrBlood, ocrThen, ocrUrine },
    data(){
      return {
        data: {
          page: 1,
          page_size: this.pagePageSize,
        },
        dataList: [],
        loading: false,
        totalCount: 0,
        current_page: 1,
        multipleSelection: [],
      }
    },
    activated() {
      this.data.page = 1
      this.current_page = 1
      this.getList()
    },
    methods: {
      changePage(page) {
        this.data.page = page
        this.getList()
      },
      changePageSize(size) {
        this.data.page_size = size
        this.data.page = 1
        this.current_page = 1
        this.getList()
      },
      refreshPage() {
        this.data.page--
        this.getList()
      },
      getList() {
        this.loading = true
        OcrIndex(this.data).then((res) => {
          if (res.code == 0) {
            this.data.page++
            this.dataList = res.data.data
            this.totalCount = res.data.count
          } else {
            this.$message.error('数据获取失败!')
          }
          this.loading = false
        })
      },
      detailTmp(row) {
        if (row) {
          if (row.pro_name == '血常规') {
              this.$refs.refOcrBlood.editTmp(row)
          } else if (row.pro_name == '便常规') {
              this.$refs.refOcrThen.editTmp(row)
          } else if (row.pro_name == '尿常规') {
              this.$refs.refOcrUrine.editTmp(row)
          }

        }
      },
      search() {
        this.data.page = 1
        this.current_page = 1
        this.getList()
      },
      searchReset() {
        this.data = {
          page: 1,
          page_size: this.data.page_size
        }
      },
    }
  }
</script>

<style>
</style>
